<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <title>登陆</title>
    <style>
        .error {
            color: red;
        }

        #wrap {
            width: 100%;
            height: 100vh;
            min-width: 1000px;
        }

        header {
            width: 100%;
            height: 8vh;
            background: #ffffff url('./img/logo.png') left center no-repeat;
            background-size: 10%;
        }

        main {
            width: 100%;
            height: 87vh;
            background: url("./img/loginbg.png") left center no-repeat;
            background-size: 100%;
            position: relative;
        }

        #content {
            width: 30%;
            height: 55vh;
            position: absolute;
            top: 7vh;
            left: 65%;
            background: #fff;
            border-radius: 8px;
        }

        #top {
            width: 100%;
            height: 7vh;
        }

        #top span {
            display: inline-block;
            width: 49%;
            text-align: center;
            font: 20px/7vh "simhei";
            border-radius: 6px 6px 0 0;
            background: #eeeeee;
        }

        #top .active {
            background: #ffffff;
        }

        #content2 {
            width: 100%;
            height: 48vh;
            padding-top: 4vh;
            position: relative;
        }

        #content2 img {
            width: 100%;
            height: 90%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #middle {
            width: 100%;
            height: 20vh;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        #middle input {
            width: 80%;
            height: 5vh;
            margin-left: 10%;
            border: 1px solid #cccccc;
            border-radius: 6px;
        }

        #middle2 {
            width: 80%;
            height: 7vh;
            margin-left: 10%;
            font: 14px/7vh "simhei";
        }

        #middle2 span:last-of-type {
            color: #2848d3;
            float: right;
        }

        #bottom {
            width: 70%;
            height: 7vh;
            margin-left: 15%;
            display: flex;
            justify-content: space-between;
            margin-top: 4vh;
        }

        #bottom input {
            width: 45%;
            font: 16px/7vh "simhei";
            text-align: center;
            border: 1px solid #999999;
            border-radius: 6px;
        }

        #bottom .active2 {
            color: #fff;
            background: #3590e6;
        }

        footer {
            width: 100%;
            height: 5vh;
            background: #ffffff;
            font: 16px/5vh "simhei";
            text-align: center;
            color: #999999;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <header></header>
        <main>
            <div id="content">
                <div id="top">
                    <span class="active">用户名登陆</span>
                    <span>二维码登陆</span>
                </div>
                <div id="content2">
                    <form id="oneForm">
                        <img src="img/ma.png" alt="">
                        <div id="middle">
                            <input type="text" placeholder="请输入手机号/用户名" id="user" name="username">
                            <input type="text" placeholder="请输入密码" id="pass" name="password">
                        </div>
                        <div id="middle2">
                            <input type="checkbox">
                            <span>记住密码</span>
                            <span>忘记密码？</span>
                        </div>
                        <div id="bottom">
                            <input type="submit" value="登陆" class="active2"></input>
                            <input type="button" value="注册" ></input>
                        </div>
                    </form>
                </div>
            </div>
        </main>
        <footer>量子矩阵公司 版权所有 Copyright @ 2018-2019 QUTO Corporation,All Rights Reserved</footer>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
<script src="./js/url.js"></script>
<script>
    $('#top span').click(function () {
        $(this).attr('class', "active");
        $(this).siblings().attr('class', '')
    });
    $('#top span:last-of-type').click(function () {
        $('#content2 img').css({
            display: 'block'
        })
    });
    $('#top span:first-of-type').click(function () {
        $('#content2 img').css({
            display: ''
        })
    });
    $('#bottom input').click(function () {
        $(this).attr('class', "active2");
        $(this).siblings().attr('class', '')
    });

    $('#bottom input:last-of-type').click(function () {
        location.href = "./06-Amy-register.html";
    });

    $('#oneForm').validate({
        rules: {
            username: 'required',
            password: {
                required: true,
                minlength: 3,
                maxlength: 16,
            }
        },
        messages: {
            username: '请输入内容',
            password: {
                required: '请输入密码',
                minlength: '请输入6-16位字符',
                maxlength: '请输入6-16位字符'
            }
        },
        //登录AJAX
        submitHandler: function () {
            $.ajax({
            url:SetUrl.conUrl,
            type:'POST',
            dataType:'json',
            data:{
                username:$('#user').val(),
                password:$('#pass').val()
            },
            success:function(data){
                if(data.code==100){
                    console.log(data)
                    alert('登录成功') ;
                    location.href = "./08-Amy-con.html";
                    localStorage.setItem("name", $('#user').val());
                    localStorage.setItem("pass", $('#pass').val());
                }else{
                    alert('账号或密码错误');
                }
            },
            error:function(xhr,errorInfo){
                alert('请求错误')
                 console.log(errorInfo);
            }
        })
        }
    });


</script>

</html>